// avatar-selector.js
import React, { Component } from 'react';
import { Grid,List } from 'antd-mobile';
class AvatarSelector extends Component {
  constructor(props) {
    super(props);
    this.state={}
  }
  render() {
    const dataList = 'boluo,caomei,chengzi,juzi,huluobo,huluobo2,mihoutao,putao,shanzu,taozi'.split(',').map(v=>({
        icon:require(`../images/${v}.jpg`),
        text:v
    }))

    const gridHeader = this.state.icon?
         (<div>
           <span>已选择头像</span>
           <img style={{width:20}} src={this.state.icon} alt=""/>
         </div>)
         :'请选择头像'
    return (
      <div className="avatar">
        <List renderHeader={()=>gridHeader}>
         <Grid data={dataList} columnNum={5} onClick={elm=>{
          this.setState(elm)
          this.props.selectAvatar(elm.text)}}/>
         </List>
      </div>
    );
  }
}

export default AvatarSelector;